<template>
    <span ref="tss" class="three_status_switch" :class="activeCls" @click="changeStatus"></span>
</template>

<script>
    export default {
        name: 'three-status-switch',
        props: {
            value: {
                type: [String, Number],
                required: true,
            },
            disabled: {
                type: Boolean,
                default: false,
            },
            startValue: {
                type: [String, Number],
                default: 0,
            },
            middleValue: {
              type: [String, Number],
              default: 1,
            },
            endValue: {
              type: [String, Number],
              default: 2,
            },
        },
        data() {
            return {
                status: 0,
                isBind: false,
            };
        },
        watch: {
            value(val) {
                if (/^[012]$/.test(val)) {
                    // this.status = +val;
                  this.status = this.userValueList.indexOf(this.value);
                  // console.log('watch-->this.status-->', this.status);
                  // console.log('watch-->this.value-->', this.value);
                }
            }
        },
        computed: {
            activeCls() {
                let cls = this.disabled ? 'disabled ' : '';
                if (this.status === 2) {
                    cls = cls + 'tss_full';
                } else if (this.status === 1) {
                    cls = cls + 'tss_half';
                }
                return cls;
            },
            userValueList() {
              // const list = [];
              const { startValue, middleValue, endValue } = this;
              return [startValue, middleValue, endValue];
              // return [String(startValue), String(middleValue), String(endValue)];
            }
        },
        methods: {
            changeStatus() {
              // console.log('changeStatus-->this.status-->', this.status);
                // console.log('click-->');
                if (this.disabled) return;
                if (this.status === 2) {
                    this.status = 0;
                } else if (this.status === 1) {
                    this.status = 2;
                } else if (this.status === 0) {
                    this.status = 1;
                }
                this.$emit('input', this.userValueList[this.status]);
                this.$emit('change', this.userValueList[this.status]);
                // if (!this.isBind) {
                //     this.isBind = true;
                //     console.log('bind-->');
                //     const tss = this.$refs.tss;
                //     tss.addEventListener('transitionend', () => {
                //         console.log('transitionend-->');
                //     });
                // }
            },
        },
        created() {
            if (/^[012]$/.test(this.value)) {
                this.status = this.userValueList.indexOf(this.value);
                // console.log('created-->this.status-->', this.status);
                // console.log('created-->this.value-->', +this.value);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .three_status_switch{
        display: inline-block;
        background: #DCDFE6;
        border-radius: 15px;
        cursor: pointer;
        position: relative;
        height: 30px;
        width: 80px;
        border: 1px solid #dcdfe6;
        vertical-align: middle;
        overflow: hidden;
        &::before{
            content: " ";
            display: block;
            height: 100%;
            width: 0;
            transition: all .3s;
            position: absolute;
            left: 0;
            top: 0;
            background: #47c5b2;
            border-radius: 15px;
        }
        &::after{
            content: " ";
            display: block;
            width: 26px;
            height: 26px;
            border-radius: 100%;
            position: absolute;
            left: 1px;
            top: 1px;
            background: #fff;
            transition: all .3s;
        }
        &.tss_half{
            &::before{
                width: calc(50% + 13px);
            }
            &::after{
                left: calc(50% - 13px);
            }
        }
        &.tss_full{
            &::before{
                width: 100%;
            }
            &::after{
                left: calc(100% - 27px);
            }
        }
        &.disabled{
            opacity: 0.7;
        }
    }
</style>
